<template>
  <view style="background: #fff; margin-top: 20rpx; min-height: 100vh">
    <view class="main">
      <u-tabs
        :list="tabList"
        @click="tabacClick"
        :activeStyle="{
          color: '#000000',
          fontWeight: 'bold',
        }"
        lineWidth="26"
        lineHeight="5"
        lineColor="#fff"
      ></u-tabs>

      <template v-if="list.length > 0">
        <view class="imageBox">
          <view class="imgB" v-for="(item, index) in list" :key="index">
            <image
              class="IMG"
              :src="item.picture"
              @click="
                TanPreviewImage(
                  list.map((i) => i.picture),
                  index
                )
              "
              mode="aspectFill"
            />
            <view class="zan">
              {{}}
              <image @click="likeFn(item)" v-if="item.likeFlag === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
              <image @click="likeFn(item)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
            </view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { TanPreviewImage } from "@/utils/commonFn";
const tabList = ref([
  {
    name: "摄影作品",
    id: "1",
  },
  {
    name: "壁纸",
    id: "2",
  },
]);
import { photographyLikeRecord, pictureLikeRecord } from "@/api/my";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import { photographyLike, pictureLike } from "@/api/home";
onMounted(() => {
  getList("1");
});
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async (type: "1" | "2") => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  let res: any;
  if (type === "1") {
    res = await photographyLikeRecord({
      pageNum: page.value,
    });
  } else {
    res = await pictureLikeRecord({
      pageNum: page.value,
    });
  }
  res.rows.forEach((item: any) => {
    item.likeFlag = "1";
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
const likeFn = async (item: any) => {
  if (item.type === "1") {
    await photographyLike({ id: item.id });
  } else {
    await pictureLike({ id: item.id });
  }
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
  } else {
    item.likeFlag = "1";
  }
};
onReachBottom(() => {
  page.value++;
  getList("1");
});
const tabacClick = (e: any) => {
  pageStatus.value = "loadmore";
  page.value = 1;
  list.value = [];
  getList(e.id);
};
</script>
<style lang="less" scoped>
.imageBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .imgB {
    width: 49%;
    height: 540rpx;
    background: #b4d2dd;
    margin-bottom: 16rpx;
    position: relative;
    .IMG {
      width: 100%;
      height: 100%;
    }
    .zan {
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      .heart {
        width: 36rpx;
        height: 36rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
